<template>
  <div>
    <div class="main w">
      <div class="right1">
        <div class="rightTop">
          <span>当前单位 :</span>
          <span class="depName">{{findEmployee.departmentName}}</span>
        </div>
        <!-- vuex 取值方法 1 -->
        <!-- <div>{{this.$store.state.firstDepId}}</div>
        <div>{{personFirstId}}</div>-->
        <div class="personList">
          <ul>
            <li
              @click="goDetailsPage(employeeItem.eid ,employeeItem.departmentId)"
              v-for="employeeItem in employeeList"
              :key="employeeItem.id"
              style="margin-left: 9px;width:158px"
            >
              <div class="photo">
                <img :src="imgSrc +employeeItem.eid" alt="" :onerror="headPortrait">
                <!-- <img
                  :src="'https://m.szpt.edu.cn/evaluate/api/employee/findImageByEmployeeId/'+employeeItem.eid"
                  alt
                  :onerror="headPortrait"
                > -->
              </div>
              <p>姓名:
                <span class="rateName">{{employeeItem.name}}</span>
              </p>
              <p>职责:
                <el-popover
                  placement="top-start"
                  title="职责"
                  width="150"
                  trigger="hover"
                  :content="employeeItem.role"
                >
                  <span slot="reference" class="duty">{{employeeItem.role}}</span>
                </el-popover>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bus from "../../components/common";
import api from "../../util/api.js";
export default {
  name: "vestin",
  data() {
    return {
      findEmployee: [],
      employeeList: [],
      depIds:'',
      headPortrait: 'this.src="' + require("../../assets/def1.png") + '"', //头像加载不出来的话显示
      imgSrc: api.findImage, //头像的地址

    };
  },
  watch: {
    $route: function(newValue, oldValue) {
      this.getDepId();
    }
  },
  created() {
    this.getDepId();
    this.personList();
  },

  methods: {
    //日常评价
    goDetailsPage(employeeId, departmentId) {
      this.$router.push({
        name: "personResult",
        params: {
          eid: employeeId,
          departmentId: departmentId
        }
      });
    },
   
    // 默认加载部门列表的第一个id
    personList() {
      bus.$on("depFirstId", firstId => {
        // 这里的firstId就是从departenList.vue中传来的数据
        // console.log("000", firstId);
        const url = `api/employee/statistics/getEmployees?departmentId=${firstId}`;

        // 获取部门人员 传入id
        this.axios.post(url).then(response => {
         
          if (response.data.data.employeeList != null) {
            this.findEmployee = response.data.data; //当前部门
            this.employeeList = response.data.data.employeeList; //获取人员列表
          }
        });
      });
    },
    //获取部门人员列表
    getDepId() {
      this.depIds = this.$route.params.depId; //获取路由id
      // console.log("23",  this.depIds);
      const url = `api/employee/statistics/getEmployees?departmentId=${
        this.depIds
      }`;
      //获取部门人员 传入id
      this.axios.post(url).then(response => {
        if (response.data.data != null) {
          this.findEmployee = response.data.data; //当前部门数据
          this.employeeList = response.data.data.employeeList; //获取人员列表
          //   console.log("人员列表", this.employeeList);
        }
      });
    }
  }
};
</script>

